<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Button</title>
    <style type="text/css">
        body{
            background-color: palevioletred;
        }
        button{
            border-radius: 2px;
            font-size: 20px;
            background-color: yellow;
        }
        div#div1{
            margin: 40px auto;
            background-color: cornflowerblue;
            display: none;
            justify-content:center;
        }
        div#div2{
            margin: 40px auto;
            background-color: cornflowerblue;
            display: none;
            justify-content:center;
        }

        p{
            font-size: 30px;
            color:whitesmoke;
        }
    </style>
</head>
<body>
<div align="center">
    <button id="btn1" onclick="btn1()">details</button>
    <button id="btn2" onclick="btn2()">add contents</button>
    <button id="btn3" onclick="btn3()">change color and font-size</button>
    <button id="btn4" onclick="btn4()">hide</button>
    <button id="btn5" onclick="btn5()">
        back
    </button>
    <button id="btn6" onclick="btn6()">picture</button>
</div>
<div id="div1">
    <p id="p2" align="center">
        Welcome to Chloe's page<br/>
    </p>
</div>

<p id="p1" align="center" style="display: none">
    Bonjour!
</p>

<div id="div2">
    <img src="images/1.png" id="img" style="width: 200px;height: 200px;margin: 0 auto;display: none">
</div>

<script type="text/javascript">
    function btn1(){
        document.getElementById('div1').style.display='block';
    }
    function btn2() {
        var node=document.getElementById("p1");
        document.getElementById("p2").appendChild(node);
        document.getElementById('p1').style.display='block';
    }
    function btn3() {
        document.getElementById('p1').style.color = 'green';
        document.getElementById('p1').style.fontSize = '12px';
        document.getElementById('p2').style.color = 'green';
        document.getElementById('p2').style.fontSize = '12px';
    }
    function btn4() {
        document.getElementById('div1').style.display = 'none';
    }
    function btn5() {
        document.getElementById('div1').style.display = 'block';
    }
    function btn6() {
        document.getElementById('p1').innerHTML = "";
        document.getElementById('p2').innerHTML = document.getElementById('div2').innerHTML;
        document.getElementById('img').style.display='block';
    }

</script>

</body>
</html>